<template>
  <BasicModal v-bind="config" title="组织选择" v-model:visible="visible" wrapClassName="loginSelectModal">
    <a-form ref="formRef" v-bind="layout" :colon="false" class="loginSelectForm">
      <!-- <a-form-item v-if="isMultiTenant" :validate-status="validate_status">
        <template #label>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>您隶属于多租户，请选择当前所属租户</span>
            </template>
            <a-avatar style="background-color: #87d068" :size="30"> 租户 </a-avatar>
          </a-tooltip>
        </template>
        <a-select v-model:value="tenantSelected" placeholder="请选择登录部门" :class="{ 'valid-error': validate_status == 'error' }">
          <template #suffixIcon>
            <Icon icon="ant-design:gold-outline" />
          </template>
          <template v-for="tenant in tenantList" :key="tenant.id">
            <a-select-option :value="tenant.id">{{ tenant.name }}</a-select-option>
          </template>
        </a-select>
      </a-form-item> -->
      <!-- <a-form-item v-if="isMultiDepart" :validate-status="validate_status1">
        <template #label>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>您隶属于多部门，请选择当前所在部门</span>
            </template>
            <a-avatar style="background-color: rgb(104, 208, 203)" :size="30"> 部门 </a-avatar>
          </a-tooltip>
        </template>
        <a-select v-model:value="departSelected" placeholder="请选择登录部门" :class="{ 'valid-error': validate_status1 == 'error' }">
          <template #suffixIcon>
            <Icon icon="ant-design:gold-outline" />
          </template>
          <template v-for="depart in departList" :key="depart.orgCode">
            <a-select-option :value="depart.orgCode">{{ depart.departName }}</a-select-option>
          </template>
        </a-select>
      </a-form-item> -->
      <a-form-item v-if="isMultiDepart" :validate-status="validate_status1">
        <!--label内容-->
        <template #label>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>您隶属于多组织，请选择当前所在组织</span>
            </template>
            <a-avatar style="background-color: rgb(104, 208, 203)" :size="30"> 组织 </a-avatar>
          </a-tooltip>
        </template>
        <!--部门下拉内容-->
        <a-select v-model:value="departSelected" placeholder="请选择组织" :class="{ 'valid-error': validate_status1 == 'error' }">
          <template #suffixIcon>
            <Icon icon="ant-design:gold-outline" />
          </template>
          <template v-for="depart in departList" :key="depart.id">
            <a-select-option :value="depart.id">{{ depart.organizationName }} -- {{ depart.organizationCode }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button @click="handleSubmit" type="primary">确认</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, watch, unref } from 'vue';
import { Avatar } from 'ant-design-vue';
import { BasicModal } from '/@/components/Modal';
import { getUserDeparts, selectDepart,queryUserOrganization,selectOrganization } from '/@/views/system/depart/depart.api';
import { getUserTenants } from '/@/views/system/tenant/tenant.api';
import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore();
const { createMessage, notification } = useMessage();
const props = defineProps({
  title: { type: String, default: '部门选择' },
  closable: { type: Boolean, default: false },
  username: { type: String, default: '' },
});

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};

const config = {
  maskClosable: false,
  closable: false,
  canFullscreen: false,
  width: '500px',
  minHeight: 20,
  maxHeight: 20,
};
const currTitle = ref('');

const isMultiTenant = ref(false);
const currentTenantName = ref('');
const tenantSelected = ref();
const tenantList = ref([]);
const validate_status = ref('');

const isMultiDepart = ref(false);
const currentDepartName = ref('');
const departSelected = ref('');
const departList = ref([]);
const validate_status1 = ref('');
//弹窗显隐
const visible = ref(false);
/**
 * 弹窗打开前处理
 */
async function show() {
  //加载部门
  await loadDepartList();
  //加载租户
  await loadTenantList();
  //标题配置
  if (unref(isMultiTenant) && unref(isMultiDepart)) {
    currTitle.value = '切换租户和组织';
  } else if (unref(isMultiTenant)) {
    currTitle.value =
      unref(currentTenantName) && unref(currentTenantName).length > 0 ? `租户切换（当前租户 :${unref(currentTenantName)}）` : props.title;
  } else if (unref(isMultiDepart)) {
    currTitle.value =
      unref(currentDepartName) && unref(currentDepartName).length > 0 ? `组织切换（当前组织 :${unref(currentDepartName)}）` : props.title;
  }
  //model显隐
  if (unref(isMultiTenant) || unref(isMultiDepart)) {
    visible.value = true;
  }
}
/**
 *加载部门信息
 */
async function loadDepartList() {
  //const result = await getUserDeparts();
  const result = await queryUserOrganization({});
  if (!result.list || result.list.length == 0) {
    return;
  }
  let currentDepart = result.list.filter((item) => item.id == result.organizationId);
  departList.value = result.list;
  departSelected.value = currentDepart && currentDepart.length > 0 ? result.organizationId : '';
  currentDepartName.value = currentDepart && currentDepart.length > 0 ? currentDepart[0].organizationName : '';
  isMultiDepart.value = true;
}
/**
 *加载租户信息
 */
async function loadTenantList() {
  const result = await getUserTenants();
  if (!result.list || result.list.length == 0) {
    return;
  }
  let tenantId = userStore.getTenant;
  let currentTenant = result.list.filter((item) => item.id == tenantId);
  currentTenantName.value = currentTenant && currentTenant.length > 0 ? currentTenant[0].name : '';
  tenantList.value = result.list;
  tenantSelected.value = tenantId;
  isMultiTenant.value = true;
}

/**
 * 提交数据
 */
async function handleSubmit() {
  // if (unref(isMultiTenant) && !unref(tenantSelected)) {
  //   validate_status.value = 'error';
  //   return false;
  // }
  // if (unref(isMultiDepart) && !unref(departSelected)) {
  //   validate_status1.value = 'error';
  //   return false;
  // }
  departResolve()
    .then(() => {
      if (unref(isMultiTenant)) {
        userStore.setTenant(unref(tenantSelected));
      }
      createMessage.success('切换成功');
      setTimeout(()=>{
        location.reload()
      },1000)
      
    })
    .catch((e) => {
      console.log('登录选择出现问题', e);
    })
    .finally(() => {
      if (unref(isMultiTenant)) {
        userStore.setTenant(unref(tenantSelected));
      }
      close();
    });
}
/**
 *切换选择部门
 */
function departResolve() {
      console.log(!unref(isMultiDepart))
  return new Promise(async (resolve, reject) => {
    if (!unref(isMultiDepart)) {
      resolve();
    } else {
      const result = await selectOrganization({
        id:userStore.getUserInfo.id,
        username: userStore.getUserInfo.username,
        organizationId: unref(departSelected),
      });
      if (result.userInfo) {
        const userInfo = result.userInfo;
        userStore.setUserInfo(userInfo);
        resolve();
      } else {
        requestFailed(result);
        userStore.logout();
        reject();
      }
    }
  });
}
/**
 * 请求失败处理
 */
function requestFailed(err) {
  notification.error({
    message: '登录失败',
    description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
    duration: 4,
  });
}
/**
 * 关闭model
 */
function close() {
  departClear();
}

/**
 *初始化数据
 */
function departClear() {
  currTitle.value = '';

  isMultiTenant.value = false;
  currentTenantName.value = '';
  tenantSelected.value = '';
  tenantList.value = [];
  validate_status.value = '';

  isMultiDepart.value = false;
  currentDepartName.value = '';
  departSelected.value = '';
  departList.value = [];
  validate_status1.value = '';

  visible.value = false;
}

/**
 * 监听username
 */
watch(
  () => props.username,
  (value) => {
    value && loadDepartList();
  }
);

defineExpose({
  show,
});
</script>
<style lang="less" scoped>
.loginSelectForm {
  margin-bottom: -20px;
}

.loginSelectModal {
  top: 20px;
}

.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>
